<template>
    <div class="child">
        <h2>我是Child 组件 ,x: {{ x }}</h2>

        <h3> Sum: {{ sum }}</h3>
        <h3> {{ content }}</h3>

        <h4 v-beauty="sum">Happy</h4>
    </div>
</template>


<script setup lang="ts" name="Child">
import axios from 'axios';
import { ref } from 'vue';

// Composition API

let sum = ref(6)
let url = 'https://v1.hitokoto.cn/?c=f'
// 子组件有异步任务 并且需要这个数据
let { data: { hitokoto: content } } = await axios.get(url)
console.log(content)


</script>


<style scoped>
/* Styles */

.child {
    background-color: rgb(156, 244, 244);
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}
</style>